<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <div id="app">
        <div :style="s"></div>
        <input type="button" value="修改" @click="change" >
    
<br>
<hr>

<hr>
<hr>

<hr>
    <!-- 对 style 属性 的加强  -->
    <!--1. style  属性 的值可以是对象  -->
    <div :style="obj1"></div>
    <input type="button" value="修改" @click="change1">

    <div :style="{width:w+'px',height:h+'px',backgroundColor:color}"></div>
    <input type="button" value="长长02" @click="zhangChang02"> 
    <!-- 2、style属性的值可以是数组 -->
    <div :style="[size,border]"></div>
    <input type="button" value="长长03" @click="zhangChang03"> 









</div>
</body>
<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data:{
            s:"width: 20px;height:30px;background-color:skyblue;margin:10px;",
            obj1:{
                width:"50px",
                height:"50px",
                backgroundColor:"skyblue",
                margin:"10px",
            },
            w:200,
           h:250,
           color:"orange",
           size:{
            width:"50px",
            height:"50px"
           },
           border:{
            border:"1px solid black"
           }
        },
        methods:{
            change(){
                this.s = "width: 60px;height:60px;background-color:red;"
            },
            change1(){
                this.obj1.width="100px"
                this.obj1.backgroundColor = "yellow"
            },
            zhangChang02(){
                this.w = 50;
            },
            zhangChang03(){
                this.size.width = "100px";
            }
        }
    })
</script>
</html>